import { utils, Application, Sprite, Container } from "pixi.js"
import { nextTick } from 'vue'
import { setup } from './setup'

/**
 * 判断浏览器能力
 * 创建舞台
 * 初始化 pixi
 * 创建 dom
 * @param {*} position 
 * @param {*} line 
 * @param {*} afterLine 
 * @param {*} openKeyBoard 
 * @param {*} isDrag 
 * @returns 
 */
export const hooks = (props, emit) => {

  // 判断浏览器是否有 webgl 能力，没有gl能力自动切换至 canvas
  let type = "WebGL";
  if (!utils.isWebGLSupported()) {
    type = "canvas";
  }

  utils.sayHello(type);

  const gl = new Application({
    width: 1200,
    height: 700,
    antialias: true, // default: false 反锯齿
    autoDensity: true,
    resolution: window.devicePixelRatio || 1, // default: 1 分辨率
    transparent: true
  })

  nextTick(() => {
    document.getElementById("pixi").appendChild(gl.view)
  })

  const background = Sprite.from('/src/assets/patrol-bg.png')
  background.width = gl.screen.width;
  background.height = gl.screen.height;

  // 创建容器
  const app = new Container()
  app.x = 0;
  app.y = 0;

  gl.stage.addChild(app)

  // 舞台
  app.addChild(background);

  setup(gl, app, props, emit)

  return { app }
}